//入口函数
$(function(){
	//给nav中的.n-middle中的.sbg绑定hover事件show(),hide()
	// 移入
	$(".n-middle").find("a").on("mouseenter", function(){
		$(this).prev().stop().fadeIn(1000).parent().siblings().find(".sbg").stop().fadeOut(1000);
		});
		//移出
	$(".n-middle").find("a").on("mouseleave", function(){
			$(this).prev().stop().fadeOut(1000);
});
	
	
	//调用ajax方法，获取json文件的值，动态创建a标签，添加到p中
$.ajax({
	url:"js/outside.json",
	type:"post",
	data:null,
	success:function(result){
		//console.log(result);
		//获取对象数组
		var arr=result;
		var op=$(".outside>li>p");
		//遍历op
         op.each(function(index,ele){
			for(var key in arr[index]){
				//动态创建a
				var oa=$("<a href='#'></a>");
				//给a样式
				oa.addClass("pa");
				//将对象中属性值放入a
				oa.text(arr[index][key]);
				//a放入p中
				$(ele).append(oa);
			}
			//遍历p中a，给满足条件的a加样式
			$(ele).children(oa).each(function(index,ele){
				if(index%4==0){
					$(this).addClass("color");
				}
			})
		})
	}
})
	//给.outside中的li绑定鼠标移入事件
	$(".outside>li").on("mouseenter",function(){
		$(".inside").children(".uls").html("");
		 $(".inside").find(".img").html("");
		//显示.inside，动态创建ul,每次创建前先移除上次创建的元素
		var num=$(this).index();
		//console.log(num);
		$(".outside>li").addClass("bg");
		$(this).removeClass("bg");
		$(this).removeClass("next");
		$(this).next().removeClass("bg");
		$(this).next().addClass("next");
		$(this).removeClass("bg");
		$(".inside").show().parent().next(".bmiddle").css("display","none");
		if(num==1){
			$(".inside").css("background","url(images/index2.jpg) no-repeat");
			for(var y=0;y<2;y++){
				var oia=$("<a href='#'></a>");
				$(".inside").append(oia);
			}
			$(".inside>a").eq(0).addClass("apple2");
			$(".inside>a").eq(1).addClass("apple");
		}
		else if(num==4){
			//console.log(this);
			$(this).addClass("bg");
			$(".inside").css("opacity","0").parent().next(".bmiddle").css("display","block");
			//给其中的op绑定鼠标移入事件
			$(this).children("p").on("mouseenter",function(){
				var n=$(this).index()+4;
				if(n==5){
					$(".inside").css("background","url(images/index3.jpg) no-repeat");
					for(var y=0;y<2;y++){
						var oia=$("<a href='#'></a>");
						$(".inside").append(oia);
					}
					$(".inside>a").eq(0).addClass("soft2");
					$(".inside>a").eq(1).addClass("soft");
				}
				else{
						$(".inside").css("background","#fff");
				}
				$(this).addClass("pbg");
				$(this).siblings().removeClass("pbg").removeClass("pnext");
				$(this).removeClass("pnext");
				$(this).next().addClass("pnext");
				$(".inside").css("opacity","1").parent().next(".bmiddle").css("display","none");
				//console.log($(this).index());
				var oul=$(".uls");
				//ajax请求数据
				$.ajax({
					url:"js/inside"+n+".json",
					data:null,
					type:"post",
					success:function(data){
						$(".inside").children(".uls").html("");
						$(".inside").find(".img").html("");
						var arr=data;
						for(var i=0;i<arr.length-1;i++){
							//动态创建li
							var oli=$("<li></li>");
							oli.addClass("uli");
							//遍历对象，将key放入动态创建的p中
							// 动态创建div，将key的值放入动态创建的a中，a再放入div
							for(var key in arr[i]){
								var op=$("<p></p>");
								op.addClass("up");
								op.text(key);
								var odiv=$("<div></div>");
								odiv.addClass("udiv");
								//key的值字符串转为数组，遍历
								var Value=arr[i][key];
								var str=Value.substr(1, Value.length - 2);//去掉[]
								var keyValue=str.split(",");
								for(var j=0;j<keyValue.length;j++){
									//动态创建a，将arr[i][key][j]放入其中
									var oa=$("<a href='javascript:;'></a>");
									if(j%3!=0){
										oa.addClass("uda");
									}else{
										oa.addClass("color2");
									}
									oa.text(keyValue[j]);
									odiv.append(oa);
								}
								oli.append(op);
								oli.append(odiv);
							}
							oul.append(oli);
						}
						
						//遍历arr中的最后一个元素
						for(var hot in arr[arr.length-1]){
							//hot的值字符串转为数组，遍历
							var hValue=arr[arr.length-1][hot];
							var hStr=hValue.substr(1, hValue.length - 2);//去掉[]
							var hotValue=hStr.split(",");
							for(var x=0;x<hotValue.length;x++){
								//动态创建li
								var hli=$("<li></li>");
								hli.addClass("ili");
								var la=$("<a href='javascript:;'></a>");
								la.addClass("la");
								la.css("background","url("+hotValue[x]+") no-repeat");
								hli.append(la);
								$(".img").append(hli);
							}
						}
					}
					
				})
			})
			return;
		}
		else{
			$(".inside").css("opacity","1");
			$(".inside").css("background","#fff");
			$(".outside>li:last").find("p").removeClass("pbg").removeClass("pnext");
		}
		//console.log($(this).index());
		var oul=$(".uls");
		//ajax请求数据
		$.ajax({
			url:"js/inside"+num+".json",
			data:null,
			type:"post",
			success:function(data){
				var arr=data;
				for(var i=0;i<arr.length-1;i++){
					//动态创建li
					var oli=$("<li></li>");
					oli.addClass("uli");
					//遍历对象，将key放入动态创建的p中
					// 动态创建div，将key的值放入动态创建的a中，a再放入div
					for(var key in arr[i]){
						var op=$("<p></p>");
						op.addClass("up");
						op.text(key);
						var odiv=$("<div></div>");
						odiv.addClass("udiv");
						//key的值字符串转为数组，遍历
						var Value=arr[i][key];
						var str=Value.substr(1, Value.length - 2);//去掉[]
						var keyValue=str.split(",");
						for(var j=0;j<keyValue.length;j++){
							//动态创建a，将arr[i][key][j]放入其中
							var oa=$("<a href='javascript:;'></a>");
							if(j%3!=0){
								oa.addClass("uda");
							}else{
								oa.addClass("color2");
							}
							oa.text(keyValue[j]);
							odiv.append(oa);
						}
						oli.append(op);
						oli.append(odiv);
					}
					oul.append(oli);
				}
				
				//遍历arr中的最后一个元素
				for(var hot in arr[arr.length-1]){
					//hot的值字符串转为数组，遍历
					var hValue=arr[arr.length-1][hot];
					var hStr=hValue.substr(1, hValue.length - 2);//去掉[]
					var hotValue=hStr.split(",");
					for(var x=0;x<hotValue.length;x++){
						//动态创建li
						var hli=$("<li></li>");
						hli.addClass("ili");
						var la=$("<a href='#'></a>");
						la.addClass("la");
						la.css("background","url("+hotValue[x]+") no-repeat");
						hli.append(la);
						$(".img").append(hli);
					}
				}
			}
			
		})
	})
//给hli绑定鼠标移入、移出事件--hli为动态创建，所以使用委托，将事件绑在.inside上
	$(".inside").on("mouseenter",".img>li>a",function(){
			$(this).css("background-position","0 -40px");
		}
	);
	$(".inside").on("mouseleave",".img>li>a",function(){
			$(this).css("background-position","0 0");
		}
	);
//给.out-in绑定鼠标移除事件
$(".out-in").on("mouseleave",function(){
	$(".inside").hide().parent().next(".bmiddle").css("display","block");
	$(".out-in>.outside>li").eq(4).find("p").removeClass("pbg").removeClass("pnext");
	$(".outside>li").removeClass("bg").removeClass("next");;
})
})